<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线字体</title>
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    
    <style>
        p i.fa {
            color: red;
            font-size: 40px;

        }
        .fa.fa-qq{
            color: rgb(143, 200, 233);
        }
    </style>

</head>

<body>
    <!-- 设置图标种类：fa-图标代码 
        设置图标大小 使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标
    -->
    <i class="fa fa-qq fa-lg fa-rotate-180"></i>
    <p>
        <i class="fa fa-arrow-circle-o-right fa-pulse"></i>
    </p>
    <i class="fa fa-spinner fa-pulse"></i>
    <ul class="fa-ul">
        <li><i class="fa-li fa fa-check-square"></i>List icons</li>
        <li><i class="fa-li fa fa-check-square"></i>can be used</li>
        <li><i class="fa-li fa fa-check-square"></i>as bullets</li>
        <li><i class="fa-li fa fa-square"></i>in lists</li>
    </ul>
    <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-qq fa-stack-1x "></i>
    </span>
    <script>
        let items = document.querySelectorAll('ul li')
        function change(el) {
            if (el.classList.contains('fa-check-square')) {
                el.classList.remove('fa-check-square')
                el.classList.add('fa-square')
                return 'cancle'
            } else {
                el.classList.remove('fa-square')
                el.classList.add('fa-check-square')
                return 'checked'

            }
        }
        items.forEach(el => {
            el.onclick = function () {
                change(this.firstChild)
            }
        })
    </script>
</body>

</html>